<template>
  <div v-if="!model || !model.contact">Loading...</div>
  <div v-else class="model">
    <div>
      <Photo v-bind:photo="photo"></Photo>
      <div>
        <h1>
          <span
            >Appointment:
            <router-link
              :to="{
                name: 'Record',
                params: { id: model.contact.id }
              }"
            >
              {{ model.contact.fullName }}
            </router-link>
          </span>
          <br />
          <span style="font-size: medium;" title="subject"
            >&quot;{{ subject }}&quot;</span
          >&nbsp;
          <span style="font-size: medium;">created on {{ createdOn }}</span>
        </h1>
      </div>
    </div>

    <ul class="nav nav-tabs">
      <li id="tab_mode_record_details">
        <a @click="updateMode(modeDetails)">Details</a>
      </li>
      <li id="tab_mode_record_history">
        <a @click="updateMode(modeHistory)">History</a>
      </li>
      <li id="tab_mode_record_history">
        <a @click="updateMode(modeMessages)">Messages</a>
      </li>
      <li id="tab_mode_record_files">
        <a @click="updateMode(modeFiles)">Files</a>
      </li>
    </ul>

    <div v-if="mode === modeDetails">
      <MessageForm
        v-bind:permission="model.permissions.addMessage && !readonly"
      ></MessageForm>

      <ContactDetails v-bind:contact="model.contact"></ContactDetails>
      <ScholarDetails v-bind:scholar="model.scholar"></ScholarDetails>

      <ClearHolds
        v-bind:permission="model.permissions.clear && !readonly"
        v-bind:state="model.scholar.hasAdvisingHolds"
      ></ClearHolds>

      <Reassign
        v-bind:assignTo="model.interaction.ownerName"
        v-bind:permission="model.permissions.reassign && !readonly"
      ></Reassign>

      <Resolve
        v-bind:state="model.interaction.interactionState"
        v-bind:permission="model.permissions.resolve && !readonly"
      ></Resolve>

      <FinishAppointment
        v-bind:permission="model.permissions.finish"
        v-bind:unfinished="model.interaction.unfinished && !readonly"
      ></FinishAppointment>
    </div>

    <div v-else-if="mode === modeHistory">
      <History v-bind:history="model.history"></History>
    </div>

    <div v-else-if="mode === modeMessages">
      <Messages></Messages>
    </div>

    <div v-else-if="mode === modeFiles">
      <Files></Files>
    </div>

    <div v-else>Unknown mode: {{ mode }}</div>
  </div>
</template>

<script>
import ClearHolds from "@/components/ClearHolds.vue";
import ContactDetails from "@/components/ContactDetails.vue";
import Files from "@/components/Files.vue";
import FinishAppointment from "@/components/FinishAppointment.vue";
import History from "@/components/History.vue";
import MessageForm from "@/components/MessageForm.vue";
import Messages from "@/components/Messages.vue";
import Photo from "@/components/Photo.vue";
import Reassign from "@/components/Reassign.vue";
import Resolve from "@/components/Resolve.vue";
import ScholarDetails from "@/components/ScholarDetails";
import { mapMutations, mapGetters } from "vuex";

export default {
  name: "Appointment",
  components: {
    ClearHolds,
    ContactDetails,
    Files,
    FinishAppointment,
    History,
    MessageForm,
    Messages,
    Photo,
    Reassign,
    Resolve,
    ScholarDetails
  },
  props: ["id"],
  computed: {
    ...mapGetters(["api", "readonly"]),
    createdOn: function() {
      return this.model.interaction.createdOn;
    },
    subject: function() {
      return this.model.interaction.subject;
    },
    atLeastTeamMember: function() {
      return this.runtimevals.model.permissions.atLeastTeamMember;
    },
    atLeastTeamReadonlyAccess: function() {
      return this.runtimevals.model.permissions.atLeastTeamReadonlyAccess;
    },
    photo: function() {
      return this.runtimevals.model.photo;
    },
    model: function() {
      return this.runtimevals.model;
    },
    modesAvailable: function() {
      return [
        this.modeDetails,
        this.modeHistory,
        this.modeFiles,
        this.modeMessages
      ];
    },
    modeDetails: function() {
      return "mode_record_details";
    },
    modeHistory: function() {
      return "mode_record_history";
    },
    modeFiles: function() {
      return "mode_record_files";
    },
    modeMessages: function() {
      return "mode_record_messages";
    }
  },
  data() {
    return {
      mode: "mode_record_details",
      numTeams: 1,
      loading: false,
      runtimevals: {
        model: ""
      },
      errorPrompt: ""
    };
  },
  methods: {
    ...mapMutations(["updateErrorPrompt"]),
    updateMode: function(mode) {
      this.mode = mode;
      console.log(this.model.contact);
    },
    getModel: function() {
      function getData(endpoint, that, bucket, refs, errorPrompt) {
        that["loading"] = true;
        if (endpoint) {
          fetch(endpoint)
            .then(response => response.json())
            .then(json => {
              if (json) {
                that[bucket][refs] = json;
                that["loading"] = false;
              } else {
                that[errorPrompt] = "Response failed.";
                that["loading"] = false;
              }
            })
            .catch(error => {
              that[errorPrompt] = `Request failed. ${error}`;
              that["loading"] = false;
            });
        } else {
          that[errorPrompt] = "No configuration.";
          that["loading"] = false;
        }
      }

      console.log(this.api.model);
      getData(
        this.api.appointment,
        this,
        "runtimevals",
        "model",
        "errorPrompt"
      );
    }
  },
  mounted() {
    this.getModel();
  }
};
</script>
